<template>
	<view class="page-wrapper">
		<div class="content">
			<div class="address" @click="selectAddress">
				<div  v-show="adShow" >
					<span>
						<h3 v-text="address.name"></h3>
						<p v-text="address.mobile"></p>
					</span>
					<p v-text="address.province + ' ' + address.city + ' ' + address.district + ' ' + address.street"></p>
				</div>
				<p  v-show="!adShow">请填写服务地址</p>
				<span>
					<image src="../../../static/img/public/right.png" mode="widthFix"></image>
				</span>
			</div>
			<div :style="(type === 4 || type === 6) ? 'display: none;' : ''" class="service-num">
				<h3>{{incrementnew?incrementnew.title:product.goods_title}}</h3>
				<p>{{incrementnew?incrementnew.name:product.goods_name+ '/' + product.total_count + '次'}}</p>
			</div>
			<div :style="(type !== 4 && type !== 6) ? 'display: none;' : ''" class="service-num">
				<h3>{{product.goods_title}}</h3>
				<p>{{product.goods_name}}</p>
			</div>
			
			<div :style="type === 1 ? '' : 'display: none;'" class="service-time">
				<span>服务时长</span>
				<div>
					<!-- <p @click="timeDecrease"></p> -->
					<span v-text="product.total_count * 4 + '小时'"></span>
					<!-- <p @click="timeIncrease"></p> -->
				</div>
			</div>
			<div :style="type === 1 || type === 3 ? '' : 'display: none;'"class="service-date" @click="selectDate">
				<span>选择服务日期</span>
				<p v-text="serviceDate !== '' ? serviceDate + (serviceTime === 1 ? ' 上午' : serviceTime === 2 ? ' 下午' : ' 全天') : ''"></p>
				<span>
					<image src="../../../static/img/public/right.png" mode="widthFix"></image>
				</span>
			</div>
			
			<!-- <div class="increment" v-if="product.increment && product.increment.length > 0">
				<div @click="selectIncrement" >
					<image src="../../../static/img/public/increment.png" mode="widthFix"></image>
					<span>增值服务</span>
					<p></p>
					<span>
						<image src="../../../static/img/public/right.png" mode="widthFix"></image>
					</span>
				</div>
				<ul>
					<li v-for="item in increment.checkedList" :key="item.id" >
						<span>{{item.name}}</span>
							<p>{{item.title}}</p>
						<span>{{item.price}}</span>
					</li>
				</ul>
			</div> -->
			
			<div class="pay-type">
				<radio-group >
					<div @click="togglePayType(0)">
						<image src="../../../static/img/public/balance-pay.png" mode="widthFix"></image>
						<span>
							<span>金币抵扣</span>
							<p>({{balance.balance}})</p>
						</span>
						<radio color="#0384FA" :checked="payType === 0" :disabled="isEmpty" />
					</div>
					<div >
						<image src="../../../static/img/tabbar/card4.png" mode="widthFix"></image>
						<span>会员卡支付<span v-if="cardData.card_no">(卡号：{{cardData.card_no}})</span></span>
						 
						<radio color="#0384FA" :checked="payType === 4" @click="cardPay()" />
					</div>
					<div @click="togglePayType(1)">
						<image src="../../../static/img/public/we-chatpay.png" mode="widthFix"></image>
						<span>微信支付</span>
						<radio color="#0384FA" :checked="payType === 1" />
					</div>
				</radio-group>
			</div>
			
			
		</div>
		<div class="footer">
			<span>
				<p>共计</p>
				<span v-if='payType != 4'>￥{{incrementnew?incrementnew.price:price}}</span>
				<span v-else>￥{{cardData.discount_price}}</span>
			</span>
			<button @click="submit">
				预约并支付
			</button>
		</div>
		
		<!-- 选择会员卡弹窗 -->
		<drawer title="会员卡" cancle overlayHide ref="drawer_card">
				<view class="address-list" v-show="cardShow">
					<view v-for="item in cardList" :key="item.id" @click="chooseCard(item)" class='card_item'>
						<div style="display: flex;justify-content: space-between">
							<text>卡号：{{item.card_no}}</text>
							<text>余额：{{item.balance}}</text>
						</div>
						<div style="display: flex;justify-content: space-between;margin-top: 20rpx;" v-if="item.discount_price > 0">
							<text>优惠金额：{{item.discount_price}}</text>
						</div>
					</view>
				</view>
				<div class="exceed-list" v-show="adShow">
					<p>无效会员卡</p>
					<div>
						<div v-for="item in unableCard" :key="item.id" class='card_item' style="background:#ccc">
							<div style="display: flex;justify-content: space-between">	
								<text>卡号：{{item.card_no}}</text>
								<text>余额：{{item.balance}}</text>
							</div>
							<div style="padding-top: 20rpx;margin-top:10px;border-top: 1rpx solid #eee;">不可用原因：{{item.invalid_msg}}</div>

						</div>
					</div>
				</div>
				
				<hEmpty v-show="cardList.length== 0"  center="暂无可用会员卡" img="../../static/img/public/address-empty.png"></hEmpty>
		</drawer>
		
		
		<!-- 选择地址弹窗 -->
		<drawer title="地址选择" cancle overlayHide ref="drawer" confirm="添加地址" @confirm="goAddAddress">
				<ul class="address-list" v-show="adShow">
					<li v-for="item in addressList" :key="item.id" @click="toggleAddress(item)" :class="item.id === address.id ? 'active' : ''">
						<span v-text="item.name.split('')[0]" class="address-item-left"></span>
						<div class="address-item-center">
							<div class="address-item-center-top">
								<span v-text="item.name"></span>
								<p v-text="item.mobile"></p>
							</div>
							<div class="address-item-center-bottom">
								<span v-if="item.is_main === 1">
									默认
								</span>
								<p v-text="item.province + ' ' + item.city + ' ' + item.district + ' ' + item.street"></p>
							</div>
						</div>
					</li>
				</ul>
				<div class="exceed-list" v-show="adShow">
					<p>超出服务范围</p>
					<ul>
						<li v-for="item in exceedList" :key="item.id" @click="exceedHandler">
							<span v-text="item.name.split('')[0]" class="address-item-left"></span>
							<div class="address-item-center">
								<div class="address-item-center-top">
									<span v-text="item.name"></span>
									<p v-text="item.mobile"></p>
								</div>
								<div class="address-item-center-bottom">
									<span v-if="item.is_main === 1">
										默认
									</span>
									<p v-text="item.province + ' ' + item.city + ' ' + item.district + ' ' + item.street"></p>
								</div>
							</div>
						</li>
					</ul>
				</div>
				
				<hEmpty v-show="!adShow"  center="暂无可用地址" img="../../static/img/public/address-empty.png"></hEmpty>
		</drawer>
		
		<!-- 选择日期弹窗 -->
		<drawer @confirm="confirmDate" cancle overlayHide title="选择日期" height="auto" confirm="确定" ref="selectDate">
				<div class="select-date">
					<ul>
						<li v-for="item in dateList" :class="(sendTime.date === item.date) ? 'active' : ''" @click="toggleDate(item.date)">
							<h3 v-text="item.week"></h3>
							<p v-text="item.date.split('-')[2]"></p>
						</li>
					</ul>
				</div>
				<div class="select-time">
					<ul>
						<li v-if="sendTime.time !== 3" :class="sendTime.time === 1 ? 'active' : ''" @click="sendTime.time = 1">上午：08:00-12:00</li>
						<li v-if="sendTime.time !== 3" :class="sendTime.time === 2 ? 'active' : ''" @click="sendTime.time = 2">下午：14:00-18:00</li>
						<li v-if="sendTime.time === 3" :class="sendTime.time === 3 ? 'active' : ''">全天：08:00-18:00</li>
					</ul>
				</div>
		</drawer>
		
		
		<!-- 选择增值服务弹窗 -->
		<drawer @confirm="confirmIncrement" cancle overlayHide title="增值服务" height="60%" confirm="确定" ref="selectIncrement">
				<checkbox-group class="select-increment" @change="selectIncrementChange">
					<label v-for="item in product.increment">
						<checkbox :value="item.id" color="#0973F7" :checked="increment.checked.findIndex(item2 => item.id === parseInt(item2)) !== -1" :disabled="isMax && (increment.checked.findIndex(item2 => item.id === parseInt(item2)) === -1)" />
						<span :style="(increment.checked.findIndex(item2 => item.id === parseInt(item2)) !== -1) ? 'color: #333333' : 'color: #999999'">{{item.name}}</span>
						<p :style="(increment.checked.findIndex(item2 => item.id === parseInt(item2)) !== -1) ? 'color: #333333' : 'color: #999999'">{{item.title}}</p>
						<span :style="(increment.checked.findIndex(item2 => item.id === parseInt(item2)) !== -1) ? 'color: #333333' : 'color: #999999'">￥{{item.price}}</span>
					</label>
				</checkbox-group>
		</drawer>
	</view>
</template>

<script>
	import drawer from '../../../components/drawer/drawer.vue'
	import {api} from '@/util/api.js';
	
	
	export default {
		data() {
			return {
				address: null,//当前选中的地址
				adShow: false,//是否有地址信息
				addressList: [],//地址列表
				exceedList: [],
				
				type: null,//商品类型（1日常保洁、2深度保洁、3整理产品、4整洁产品、5整理课程、6整洁课程）
				goods_id: null,
				product: {},//当前商品
				serviceLong: 4,//服务时长
				sendTime: {
					date: '',
					time: 1
				},
				serviceDate: '',//服务日期
				dateList: [],//最近一周的日期列表
				serviceTime: 1,//服务时间段
				payType: 0,//支付类型
				balance: {},
				
				increment: {
					checkNum: 1,
					list:[],
					checked: [],
					checkedList: [],
					total_price: 0
				},
				isMax: false,
				isEmpty: false,
				price: null,
				
				incrementnew:'',
				cardList: [],
				unableCard: [],
				cardData: {},
				cardShow: false
			}
		},
		
		watch: {
			addressList(oldV,newV) {
				if(this.addressList.length !== 0 || this.exceedList.length !== 0) {
					this.adShow = true;
				} else {
					this.adShow = false;
				}
			},
			increment(oldV,newV) {
				if(this.increment.checked.length === this.product.in_number) {
					this.isMax = true;
				} else {
					this.isMax = false;
				}
			}
		},
		methods: {
			cardPay(){
				this.payType =  4
				this.getCardList()
				this.$refs.drawer_card.open()
				this.cardShow = true
			},
			chooseCard(item){
				this.cardData = {id: item.id , card_no: item.card_no , discount_price: item.discount_price };
				this.$refs.drawer_card.hide();	
			},
			getCardList(){
				api.getOrderCardList({goods_id: this.goods_id , order_price: this.incrementnew.price || this.price ,} ,res =>{
					 if(res.code == 0){
						 this.cardList = res.data.filter(item => item.is_invalid == 0);
						 this.unableCard = res.data.filter(item => item.is_invalid == 1);
					 }
					
				})
				
			},
			
			// 获取地址列表
			getAddressList() {
				this.addressList = [];
				this.exceedList = [];
				api.getAddressList({}, res => {
					if(res.data) {
						res.data.forEach((item, index) => {
							if(getApp().globalData.nowRegion.county === '全部') {
								if(item.city === getApp().globalData.nowRegion.city) {
									this.addressList.push(item);
									if(item.is_main === 1) {
										this.addressList.unshift(this.addressList.splice(index , 1)[0]);
									}
								} else {
									this.exceedList.push(item);
								}
							} else {
								if(item.district === getApp().globalData.nowRegion.county) {
									this.addressList.push(item);
									if(item.is_main === 1) {
										this.addressList.unshift(this.addressList.splice(index , 1)[0]);
									}
								} else {
									this.exceedList.push(item);
								}
							}
							
						});
						this.initAddress();
					}
					this.getBanlance();
				})
			},
			//获取客户余额
			getBanlance() {
				api.getMemberBanlance({}, res => {
					this.balance = res.data;
					if(this.balance.balance <= 0) {
						this.togglePayType(1);
						this.isEmpty = true;
					} else {
						this.togglePayType(0);
						this.isEmpty = false;
					}
					
					//获取商品信息
					this.getGoodsInfo();
				})
			},
			togglePayType(type) {
				switch(type) {
					case 0: 
						if(this.balance.balance > 0) {
							this.payType = 0;
						}
						break;
					case 1: 
						this.payType = 1;
						break;
					default: 
						break;
				}
				
			},
			
			getGoodsInfo() {
				uni.hideLoading();
				api.getGoodsInfo({goods_id: this.goods_id}, res => {
					this.product = res.data;
					console.log(this.product , 'goods')
					
					
					this.initPrice();
					if(this.type === 1 || this.type === 3) {
						// 根据次数判断是否是全天
						if(res.data.total_count === 1) {
							this.serviceTime = 1;
						}
						if(res.data.total_count === 2) {
							this.serviceTime = 3;
						}
					}
					
				})
			},
			initPrice() {
				if(this.type === 4 || this.type === 6 || this.product.is_first_buy === 0) {
					this.price = Math.round(this.product.sale_price * 100 - this.product.discount_price * 100)/100 + this.increment.total_price;
				} else {
					this.price = this.product.first_price
				}
			},
			
			selectIncrement() {
				this.$refs.selectIncrement.open();
				let obj = {...this.increment};
				obj.checked = [];
				obj.checkedList.forEach(item => {
					obj.checked.push(item.id);
				})
				this.increment = obj;
			},
			selectIncrementChange(res) {
				console.log('res',res);
				let obj = {...this.increment};
				obj.checked = res.detail.value;
				this.increment = obj;
				console.log('this.increment',this.increment);
			},
			confirmIncrement() {
				this.increment.checkedList = []
				this.product.increment.forEach(item => {
					this.increment.checked.forEach(item2 => {
						if(item.id === parseInt(item2)) {
							this.increment.checkedList.push(item);
						}
					})
				});
				
				this.increment.total_price = 0;
				this.increment.checkedList.forEach(item => {
					this.increment.total_price = Math.round(this.increment.total_price * 100 + item.price * 100)/100
				})
				
				this.initPrice();
				this.$refs.selectIncrement.hide();
			},
			
			
			
			// 添加地址
			goAddAddress() {
				uni.navigateTo({
					url: '../../member/address/addAddress/addAddress'
				});
				// this.$refs.drawer.hide();
			},
			selectAddress() {
				this.$refs.drawer.open();
			},
			// 切换地址
			toggleAddress(payload) {
				this.address = payload;
				this.$refs.drawer.hide();
			},
			// 超出服务范围提示
			exceedHandler() {
				wx.showModal({
					title: '提示',
					content: '超出服务范围，请在首页切换区域',
					showCancel: false
				})
			},
			// 初始化选中地址
			initAddress() {
				if(this.addressList.length>0) {
					let i = this.addressList.findIndex(item => {
						return item.is_main === 1
					});
					if(i >= 0) {
						this.address = this.addressList[i];
					} else {
						this.address = this.addressList[0];
					}
				}
			},
			// 日期选择
			selectDate() {
				this.$refs.selectDate.open();
				this.dateList = [];
				// 获取一周的日期
				let getTime = []
				for (let index = 0; index < 7; index++) {
					var dateTime = new Date();
					dateTime = dateTime.setDate(dateTime.getDate() + index);
					dateTime = new Date(dateTime);
					this.dateList.push({
						date: this.$format(dateTime).split(' ')[0],
						week: this.$format(dateTime).split(' ')[1]
					})
				}
				if(this.serviceDate === '') {
					this.sendTime.date = this.dateList[0].date;
					this.sendTime.time = this.serviceTime;
				} else {
					this.sendTime.date = this.serviceDate;
					this.sendTime.time = this.serviceTime;
				}
			},
			// 确定日期
			confirmDate() {
				this.serviceDate = this.sendTime.date;
				this.serviceTime = this.sendTime.time;
				this.$refs.selectDate.hide();
			},
			// 切换日期
			toggleDate(date) {
				this.sendTime.date = date;
			},
			
			// 提交表单
			submit() {
				let param = {};
				uni.showLoading({
					title: "加载中..."
				})
				if(this.address !== null) {
					//请求数据的数据
					param.goods_id = this.product.goods_id;
					param.address_id = this.address.id;
					//区域id
					param.region_id = getApp().globalData.nowRegion.id;
					// // 增值服务数据
					// let incrementIdArr = [];
					// this.increment.checkedList.forEach(item => {
					// 	incrementIdArr.push(item.id);
					// })
					// param.increment_id = incrementIdArr.join(',');
					 param.increment_id = this.incrementnew.id  //new
					
					
					if(this.type === 1 || this.type === 3) {
						if(this.serviceDate !== '') {
							// 服务日期
							// let d = new Date(this.serviceDate);
							// param.order_time = parseInt(d.getTime());
							param.order_time = this.serviceDate;
							// 服务时段
							param.slot = this.serviceTime;
						} else {
							uni.showToast({
								title:"请选择服务日期",
								mask: 'true',
								icon: 'none'
							});
							return;
						}
					}
					if(this.payType == 4 && !this.cardData.id){
						uni.showToast({
							title:"请选择会员卡",
							mask: 'true',
							icon: 'none'
						});
						return;
						
					}
					
					api.creatOrder(param, res => {
						if (res.code === 200) {
							if(this.payType === 0) {
								console.log('余额支付');
								uni.showModal({
								    title: '提示',
								    content: '确定从余额抵扣?',
								    success: (data) => {
								        if (data.confirm) {
								            api.payOrder({
								            	order_sn: res.data.order_sn,
								            	able_balance: 1
								            }, res2 => {
								            	if(res2.data.status === 0) {
								            		this.requestPay(res2.data.options, res.order_sn);
								            	} else {
								            		uni.redirectTo({
								            			url: '../paySuccess/paySuccess?sn=' + res.data.order_sn + '&time=' + (new Date()).getTime()/1000 + '&isPay=1&price=' + this.price
								            		})
								            	}
								            });
								        } else if (data.cancel) {
								            console.log('用户点击取消');
								        }
								    }
								});
								
								
							} else if(this.payType === 4){
								api.payCardOrder({order_sn: res.data.order_sn , card_id: this.cardData.id}, res2 => {
									console.log(res2 , 'res2')
									if(res2.data.status == 0) {
										uni.redirectTo({
											url: '../paySuccess/paySuccess?sn=' + res.data.order_sn + '&time=' + (new Date()).getTime()/1000 + '&isPay=1&price=' + this.price
										})
									}
								});
								
							}else {
								api.payOrder(res.data, res2 => {
									if(res2.data.status === 0) {
										this.requestPay(res2.data.options, res.data.order_sn);
									}
								});
								
							}
							// console.log(res)
						}
						uni.hideLoading();
					})
					
				} else {
					uni.showToast({
						title:"请选择服务地址",
						mask: 'true',
						icon: 'none'
					});
				}
				
			},
			
			// 请求支付 --> 获取结果后 --> 重定向到订单详情页面
			requestPay(res, sn) {
				let that = this
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: res.timeStamp,
					nonceStr: res.nonceStr,
					package: res.package,
					signType: res.signType,
					paySign: res.paySign,
					success: function(e) {
						// 支付成功跳转核销码页面
						uni.redirectTo({
							url: '../paySuccess/paySuccess?sn=' + sn + '&time=' + res.timeStamp + '&isPay=1&price=' + that.price
						})
					},
					fail: function(e) {
						uni.redirectTo({
							url: '../paySuccess/paySuccess?sn=' + sn + '&time=' + res.timeStamp + '&isPay=0&price=' + that.price
						})
					}
				});
			
			}
		
		},
		onLoad(option) {
			
			console.log(option);
			this.type = parseInt(option.type);
			this.goods_id = parseInt(option.goods_id);
			if(option.increment){
				this.incrementnew=JSON.parse(option.increment)
			}
			uni.showLoading({
				title: "加载中..."
			})
			
		},
		onShow() {
			this.getAddressList();
			this.initAddress();
		}
			
	}
</script>

<style scoped>
	.card_active{
		background-color: #999;
	}
	.card_item{
		padding: 30rpx;
		margin-top: 30rpx;
		font-size: 24rpx;
		background: #eeeeee;
		border-radius: 20rpx;
	}
	.page-wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.content {
		width: 100%;
		box-sizing: border-box;
		padding: 10rpx 30rpx;
		flex-grow: 1;
		overflow: auto;
	}
	.content>div {
		background-color: #ffffff;
		box-sizing: border-box;
		padding: 30rpx;
		border-radius: 10rpx;
		margin-top: 20rpx
	}
	
	.address {
		width: 100%;
		display: flex;
		align-items: center;
		min-height: 180rpx;
	}
	.address>div {
		flex-grow: 1;
	}
	.address>div>span {
		display: flex;
		align-items: center;
		flex-shrink: 0;
	}
	.address>div>span>h3 {
		font-size: 28rpx;
		color: #333333;
	}
	.address>div>span>p {
		font-size: 22rpx;
		color: #999999;
		margin-left: 20rpx;
	}
	
	.address>div>p {
		font-size: 24rpx;
		color: #666666;
		margin-top: 20rpx;
		flex-grow: 1;
	}
	
	.address>p {
		flex-grow: 1;
	}
	.address>span {
		flex-shrink: 0;
	}
	.address>span>image {
		width: 17rpx;
	}
	
	/* 地址列表 */
	
	.address-list {
		width: 100%;
		box-sizing: border-box;
		padding: 0 30rpx 30rpx 30rpx;
	}
	.address-list>li {
		width: 100%;
		background-color: #ffffff;
		margin-top: 20rpx;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 30rpx 20rpx 30rpx 20rpx;
	}
	.address-list>li.active {
		background-color: #eeeeee;
	}
	
	
	.exceed-list {
		width: 100%;
		box-sizing: border-box;
		padding: 0 30rpx;
	}
	.exceed-list> p {
		width: 100%;
		font-size: 28rpx;
		color: #aaaaaa;
	}
	.exceed-list>ul {
		width: 100%;
		box-sizing: border-box;
		padding: 0 0 30rpx 0;
	}
	.exceed-list>ul>li {
		width: 100%;
		background-color: #eeeeee;
		margin-top: 20rpx;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 30rpx 20rpx 30rpx 20rpx;
	}
	
	.address-item-left {
		font-size: 34rpx;
		color: #A7A7A7;
		background-color: #D8D8D8;
		height: 65rpx;
		width: 65rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 10rpx;
		flex-shrink: 0;
	}
	
	
	.address-item-center {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		flex-grow: 1;
		/* border-right: 1rpx solid #eee; */
	}
	.address-item-center-top {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 10rpx
	}
	.address-item-center-top>span {
		font-size: 26rpx;
		color: #333333;
	}
	.address-item-center-top>p {
		color: #999999;
		font-size: 20rpx;
		margin-left: 10rpx
	}
	
	.address-item-center-bottom {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.address-item-center-bottom>span {
		font-size: 14rpx;
		color: #027AFF;
		background-color: #87C6FF;
		display: inline-block;
		width: 39rpx;
		height: 22rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 10rpx;
	}
	.address-item-center-bottom>p {
		color: #666666;
		font-size: 22rpx;
	}
	
	
	.service-num {
		
	}
	.service-num>h3 {
		font-size: 30rpx;
		color: #333333;
	}
	.service-num>p {
		font-size: 24rpx;
		color: #999999;
		margin-top: 20rpx
	}
	
	.service-time {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.service-time>span {
		font-size: 30rpx;
		color: #333333
	}
	.service-time>div {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.service-time>div>p {
		border-radius: 50%;
		border: 1rpx solid #979797;
		box-sizing: border-box;
		height: 38rpx;
		width: 38rpx;
		position: relative;
	}
	.service-time>div>p:nth-child(1)::before{
		content: '';
		height: 2rpx;
		width: 50%;
		background-color: #979797;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	
	.service-time>div>p:nth-child(3)::before{
		content: '';
		height: 2rpx;
		width: 50%;
		background-color: #979797;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.service-time>div>p:nth-child(3)::after{
		content: '';
		height: 50%;
		width: 2rpx;
		background-color: #979797;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	
	.service-time>div>span {
		font-size: 28rpx;
		color: #666666;
		vertical-align: middle;
		margin: 0 20rpx
	}
	
	.service-date {
		display: flex;
		align-items: center;
		
	}
	.service-date>p {
		flex-grow: 1;
		font-size: 28rpx;
		color: #666666;
		text-align: end;
		box-sizing: border-box;
		padding-right: 20rpx;
	}
	.service-date>span {
		flex-shrink: 0;
	}
	.service-date>span>image {
		width: 17rpx;
	}
	
	.select-date {
		width: 100%;
	}
	.select-date>ul {
		width: 100%;
		overflow: auto;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		box-shadow: 0 0 14px #eee;
	}
	.select-date>ul>li {
		width: 120rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		flex-shrink: 0;
		box-sizing: border-box;
		padding-top: 20rpx;
	}
	.select-date>ul>li.active>h3 {
		color: #0973F7;
	}
	.select-date>ul>li.active>p {
		color: #0973F7;
		border-bottom: 1rpx solid #0973f7;
	}
	
	.select-date>ul>li>h3 {
		font-size: 24rpx;
		color: #666666;
	}
	.select-date>ul>li>p {
		font-size: 22rpx;
		color: #999999;
		margin-top: 30rpx;
		box-sizing: border-box;
		padding-bottom: 20rpx;
	}
	
	.increment {
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	.increment>div {
		width: 100%;
		display: flex;
		align-items: center;
		height: 90rpx;
	}
	.increment>div>image {
		width: 34rpx;
	}
	.increment>div>p {
		flex-grow: 1;
		text-align: end;
		text-overflow: ellipsis;
		color: #999999;
		font-size: 22rpx;
		box-sizing: border-box;
		padding: 0 20rpx;
	}
	.increment>div>span:nth-child(2) {
		flex-shrink: 0;
		font-size: 28rpx;
		color: #333333;
		margin-left: 30rpx;
		
	}
	.increment>div>span:last-child {
		width: 19rpx;
		flex-shrink: 0;
	}
	.increment>div>span:last-child>image {
		width: 100%;
	}
	
	.increment>ul {
		width: 100%;
	}
	.increment>ul>li {
		width: 100%;
		display: flex;
		align-items: center;
		height: 90rpx;
		border-top: 1rpx solid #eeeeee;
	}
	.increment>ul>li>span {
		font-size: 24rpx;
		color: #999999;
		flex-shrink: 0;
	}
	.increment>ul>li>p {
		font-size: 24rpx;
		color: #999999;
		flex-grow: 1;
		text-align: center;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		box-sizing: border-box;
		padding: 0 20rpx;
	}
	
	
	
	.pay-type {
		width: 100%;
		padding: 0 30rpx!important;
	}
	.pay-type div {
		width: 100%;
		display: flex;
		align-items: center;
		height: 108rpx;
	}
	.pay-type div:nth-child(1) {
		border-bottom: 1rpx solid #eee;
	}
	
	
	.pay-type div>image {
		width: 34rpx;
		flex-shrink: 0;
		margin-right: 10rpx;
	}
	.pay-type div>span {
		flex-grow: 1;
		display: flex;
		align-items: center;
		font-size: 28rpx;
	}
	
	
	
	.select-time {
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx;
		overflow: hidden;
	}
	.select-time>ul {
		margin-right: -20rpx;
		overflow: hidden;
	}
	.select-time>ul>li {
		width: calc(50% - 20rpx);
		margin-right: 20rpx;
		height: 90rpx;
		line-height: 90rpx;
		display: inline-block;
		box-sizing: border-box;
		border-radius: 6rpx;
		margin-top: 20rpx;
		text-align: center;
		font-size: 24rpx;
		background-color: #FAFAFA;
		border: 1rpx solid transparent;
	}
	.select-time>ul>li.active {
		border: 1rpx solid #0973f7;
		background-color: rgba(9, 115, 247, 0.1);
		color: #0973f7;
	}
	
	.select-increment {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.select-increment>label {
		width: 100%;
		display: flex;
		align-items: center;
		border-top: 1rpx solid #eeeeee;
		box-sizing: border-box;
		padding: 30rpx 30rpx;
		
	}
	.select-increment>checkbox {
		flex-shrink: 0;
		
	}
	.select-increment>label>span:nth-child(2) {
		margin-left: 30rpx
	}
	.select-increment>label>span {
		font-size: 24rpx;
		color: #999999;
		flex-shrink: 0;
	}
	.select-increment>label>p {
		font-size: 24rpx;
		color: #999999;
		box-sizing: border-box;
		padding: 20rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		flex-grow: 1;
		text-align: center;
	}
	
	
	.footer {
		flex-shrink: 0;
		width: 100%;
		height: 141rpx;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		justify-content: space-between;
		padding: 0 60rpx;
		background-color: #ffffff;
	}
	.footer>span {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.footer>span>p {
		font-size: 22rpx;
		color: #333333;
	}
	.footer>span>span {
		font-size: 34rpx;
		color: #ff3232;
	}
	.footer>button {
		background-image: linear-gradient(to right, #0973F7, #0286FA);
		width: 426rpx;
		height: 90rpx;
		border-radius: 45rpx;
		border:none;
		color: #ffffff;
		font-size: 34rpx;
		margin: 0;
	}
</style>
